import * as PIXI from 'pixi.js'
import { useWindowSize } from '@vueuse/core'
import useMainStore from '@renderer/store/modules/useMainStore'
import { getPixi, setPixi } from '@renderer/store/modules/usePixiStore'
import { createEf } from '@renderer/utils/ef'
import { ref, watch } from 'vue'

export const stageModalInputSwitch = ref(false)
export const stageModalTextareaSwitch = ref(false)
watch(stageModalInputSwitch, (val) => {
  const container = getPixi('stage-modal')
  if (container) {
    container.visible = val
  }
})
watch(stageModalTextareaSwitch, (val) => {
  const container = getPixi('stage-modal')
  if (container) {
    container.visible = val
  }
})
export default (): void => {
  let container = getPixi('stage-modal')
  if (!container) {
    const { width, height } = useWindowSize()
    const mainStore = useMainStore()
    const modalRect = new PIXI.Graphics()
    modalRect.rect(0, 0, width.value, height.value).fill({
      color: 0x000000,
      alpha: 0,
    })
    container = new PIXI.Container({ visible: false })
    container.addChild(modalRect)
    setPixi('stage-modal', container)
    // 绑定事件
    createEf(
      () => {
        stageModalInputSwitch.value = false
        stageModalTextareaSwitch.value = false
      },
      { type: 'click', peimi: true },
    ).whiteAdd(container)
    const { app } = mainStore
    app!.stage.addChild(container)
  }
}
